<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-06-11 18:09:29
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-07-22 15:45:52
 * @FilePath: \cip-mobile\src\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 创建单位页 -->
<script lang="ts" setup>
import { whManagerBsTbExamRecordBeginExamUsingPost, whManagerBsTbExamRecordEndExamUsingPost } from '@/genapi/wh';
import { showNotify } from '@nutui/nutui';
import { useUserStore } from '@/stores/user';

defineOptions({ name: 'ExamPage' });

const userStore = useUserStore();

const router = useRouter();

const dialogVisible1 = ref(false);
const dialogVisible2 = ref(false);

const back = () => {
	dialogVisible1.value = false;
	router.replace({ path: '/home' });
};

const quesList = ref<any>([]);
const examId = ref<any>('');

const answeredNum = computed(() => {
	let num = 0;
	quesList.value.forEach((item) => {
		if (item.examAnswer && item.examAnswer.length) {
			num += 1;
		}
	});
	return num;
});

const submit = async () => {
	let answers = <any>[];
	quesList.value.forEach((item) => {
		answers.push({
			examAnswer: typeof item.examAnswer === 'string' ? item.examAnswer : item.examAnswer.sort().join(','),
			examQuestionId: item.examQuestionId,
		});
	});
	let { data } = await whManagerBsTbExamRecordEndExamUsingPost({
		data: {
			examRecordId: examId.value,
			userAnswerList: answers,
		},
	});
	userStore.examDetails = data;
	dialogVisible2.value = false;
	router.replace({ path: '/home/success' });
};

const getExamData = async () => {
	const { data } = await whManagerBsTbExamRecordBeginExamUsingPost({});
	if (typeof data === 'string') {
		showNotify.text(data);
		router.replace({ path: '/home' });
	} else if (typeof data === 'object') {
		examId.value = data[0].examRecordId;
		data.forEach((item) => {
			quesList.value.push({
				examQuestionId: item.id,
				type: item.examType,
				content: item.examContent,
				options: JSON.parse(item.examSelect),
				examAnswer: item.examType === '2' ? [] : '',
			});
		});
	}
};

onMounted(() => {
	getExamData();
});
</script>

<template>
	<div class="examPage">
		<nut-navbar title="考试内容" left-show @click-back="dialogVisible1 = true"></nut-navbar>
		<nut-dialog
			teleport="#app"
			title="退出考试"
			content="确认要退出考试吗？"
			v-model:visible="dialogVisible1"
			:onOk="back"
		></nut-dialog>
		<div class="examContent">
			<nut-form label-position="top">
				<nut-form-item v-for="(item, i) in quesList" :key="i">
					<template #label>
						<div class="quesContent">
							<div class="quesType" v-if="item.type === '1'">单选</div>
							<div class="quesType" v-else-if="item.type === '2'">多选</div>
							<div class="quesType" v-else-if="item.type === '3'">判断</div>
							<div class="quesType" v-else>--</div>
							<span>{{ item.content }}</span>
						</div>
					</template>
					<nut-radio-group v-if="item.type === '1'" v-model="item.examAnswer">
						<nut-radio v-for="(optionItem, i) in item.options" :key="i" :label="optionItem.label">{{
							`${optionItem.label}：${optionItem.value}`
						}}</nut-radio>
					</nut-radio-group>
					<nut-checkbox-group v-else-if="item.type === '2'" v-model="item.examAnswer">
						<nut-checkbox v-for="(optionItem, i) in item.options" :key="i" :label="optionItem.label">{{
							`${optionItem.label}：${optionItem.value}`
						}}</nut-checkbox>
					</nut-checkbox-group>
					<nut-radio-group v-else-if="item.type === '3'" v-model="item.examAnswer">
						<nut-radio label="1">正确</nut-radio>
						<nut-radio label="2">错误</nut-radio>
					</nut-radio-group>
					<div class="otherQuestion" v-else></div>
				</nut-form-item>
			</nut-form>
		</div>
		<div class="examSubmitBox">
			<span>{{ `${answeredNum}/${quesList.length}` }}</span>
			<nut-button type="info" @click="dialogVisible2 = true">交卷</nut-button>
			<nut-dialog
				teleport="#app"
				title="提交试卷"
				content="确认要提交试卷吗？"
				v-model:visible="dialogVisible2"
				:onOk="submit"
			></nut-dialog>
		</div>
	</div>
</template>

<style scoped lang="scss">
.examPage {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	--nut-button-primary-border-color: #000;
	--nut-primary-color: #165dff;
	.examContent {
		height: 87vh;
		overflow-y: auto;
		.quesContent {
			display: flex;
			margin-bottom: 10px;
			.quesType {
				width: 35px;
				height: 18px;
				background-color: #165dff;
				color: #fff;
				text-align: center;
				font-size: 12px;
				line-height: 19px;
				margin-right: 5px;
			}
			span {
				font-size: 16px;
				line-height: 17px;
			}
		}
	}
	.examSubmitBox {
		height: 8vh;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1px solid #d0d4db;
		.nut-button {
			width: 73%;
		}
		span {
			color: #165dff;
			font-weight: 600;
		}
	}
}
</style>

<style lang="scss">
.nut-notify {
	text-align: center;
	background: linear-gradient(135deg, rgba(255, 93, 13, 1) 0%, rgba(255, 154, 13, 1) 100%);
	color: #fff;
	height: 40px;
	line-height: 40px;
}
</style>
